<template>
  <!-- 频道组件 -->
  <div class="all-channel">
    <!-- 我的频道 -->
     <div class="my-channel">
      <van-cell :border="false">
        <span 
        slot="title" 
        class="my-channel-title"
        >
        我的频道
      </span>
            <van-button  
            plain size="small" 
            type="danger" 
            @click="EditStatus">
              {{isEdit? '取消':'编辑'}}
            </van-button>
         
      </van-cell>
        <van-checkbox-group 
        v-model="value"
        direction="horizontal" 
        ref="checkboxGroup" 
        :disabled="!isEdit">
          <van-checkbox 
          :name="objList.id" 
          class="iconBtn-size" 
          v-for="(objList,index) in UserServiceList" 
          :key="objList.id"
          @click="deleteChannel(objList,index)"
          ref="deleteChannelBoxs"
          >
          {{objList.name}}
        </van-checkbox>
        </van-checkbox-group>
     <div class="deleteBtn" v-if="isEdit">
       <div class="allBtn">
            <van-button 
            type="primary" 
            @click="checkAll" 
            size="small"  
            :disabled="UserServiceList.length > 1 ?  false : true" 
            >全选</van-button>
       </div>
        <van-button  plain size="small" type="danger" @click="confirmDelete">
          确认删除
        <van-icon  name="delete-o" color="#ed3651" />
        </van-button>
      </div>
    </div>
    <van-divider :style="{margin: '0'}"> . </van-divider>
    <!-- 所有的频道 -->
    <div class="whole-channel">
        <van-cell :border="false">
          <span slot="title" class="whole-channel-title">所有频道</span>
          <van-button type="danger" size="small" plain @click="allChannelEdit">
            {{allChannelStatus? '取消' : '编辑'}}
          </van-button>
        </van-cell>
        <van-checkbox-group
        v-model="value"
        direction="horizontal" 
        ref="addCheckboxGroup" 
        :disabled="!allChannelStatus">
          <van-checkbox 
          :name="allObj.id" 
          class="allIconBtn"
          ref="checkboxes"
          @click="onCheckBox(allObj,index)"
          v-for="(allObj,index) in allUserChannels" 
          :key="allObj.id">{{allObj.name}}</van-checkbox>
        </van-checkbox-group>

        <div class="addBtn" v-if="allChannelStatus">
          <van-button 
          type="primary" 
          @click="addCheckAll" 
          :disabled="allChannelList.length > 0 ?  false : true" 
          size="small" 
          class="addAllBtn"
          >
          {{checkBTN? '反选': '全选' }}
        </van-button>
          <van-button plain size="small" type="info" @click="confirmChannel">
            确认添加
            <van-icon name="add-o"/>
          </van-button>
        </div>
    </div>

  </div>
</template>

<script>
import { getAllService,addUserChannels,deleteUserChannel } from '@/service/getDate'
import { mapState } from 'vuex';
export default {
   name: 'AllChannel',
   data() {
    return {
      value:[],
      addResult: [],
      deleteResult: [],
      isEdit:  false, // 我的频道编辑状态开关
      // selectAll: false, // 全选反选开关
      allChannelStatus: false, // 所有频道的编辑状态开关 
      allChannelList: [], // 所有频道的数据
      addChannelList: [], // 需要添加的频道
      deleteChannelList: [], // 需要删除的频道
      checkBTN: false, // 添加频道选项框全选按钮
      deleteAllBtn: false, // 删除频道选项框全选按钮
    };
  },
  created() {
    this.allChannelData()
  },
  props: {
    UserServiceList: {
      type: Array,
      required: true
    },
    myActive: {
      type: [Number,String],
      required: true,
    }
  },
 
  methods: {
    // 点击我的频道的全部按钮
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(this.deleteAllBtn = !this.deleteAllBtn);
      this.deleteResult.forEach((res,index) => {
        this.deleteChannel(this.UserServiceList[index],index)
      })
    },

    // 推荐频道的全选按钮
    addCheckAll() {
      this.$refs.addCheckboxGroup.toggleAll(this.checkBTN = !this.checkBTN)
      this.$refs.checkboxes.forEach((res) => {
        res.$el.click()
      })
      this.$emit('channelsVal', this.addChannelList)

    },

    // 我的频道的编辑按钮
    EditStatus() {
      this.isEdit = !this.isEdit
      this.deleteAllBtn = false
      this.deleteResult= []
      this.$refs.checkboxGroup.toggleAll(false);
    },

    // 推荐频道的编辑按钮
    allChannelEdit() {
      this.allChannelStatus = !this.allChannelStatus
      this.checkBTN =false
      this.$refs.addCheckboxGroup.toggleAll(false)
    },

    // 获取全部频道数据
    async allChannelData() {
      try {
        const {data}= await getAllService()
        this.allChannelList = data.data.channels
      } catch(err) {
        this.$toast.fail('频道获取失败')
      }
    },

    // 点击推荐频道复选框时触发
    onCheckBox(allObj,index) {
      // console.log(this.$refs.checkboxes[index].checked);

      console.log(this.$refs.checkboxes[index].checked)
      // 获取复选框的DOM实例对象，将checked的状态存入到常量中
      const checkedBox = this.$refs.checkboxes[index].checked
      // 判断复选框是否已经打勾
      if(!checkedBox) {   // 若已经打勾的话，则push进新数组中
        this.addChannelList.push(allObj)
        this.addResult.push(index)
      }
    },

    // 点击推荐频道的确认按钮 触发添加事件
    confirmChannel() {
      if(this.user) {
        try {
          // 将复选框打勾的选项存入到新数组中，然后一次循环把数据添加发送到接口中
          this.addChannelList.forEach(async res => {
          await addUserChannels({
          id: res.id,
          seq: res.length,
          })
         })

        this.$toast.success('添加成功')
        } catch(err) {
          this.$toast.fail('添加失败')
        }
      } else {
        this.$store.commit('CHANNELS_ARR',this.UserServiceList)
      }
      // this.$emit('onAllJump', this.)
    },
    
    // 点击我的频道的复选框
    deleteChannel(data,index) {
      const deletesDate = this.$refs.deleteChannelBoxs[index].checked
      if(!deletesDate) {
        console.log(!deletesDate);
        console.log(index);
        this.deleteChannelList.push(data)
        this.deleteResult.push(index)
        // console.log(this.deleteResult);
      }
    },

    // 点击我的频道的确认确认按钮，触发删除事件
    confirmDelete() {
      this.deleteChannelList.forEach(async res => {
        try {
          if(this.user) {
            await deleteUserChannel(res.id)
            this.$toast.success('删除成功')
            } else {
            this.$store.commit('CHANNELS_ARR', this.UserServiceList)
            }
          } catch(err) {
            this.$toast.fail('删除失败')
          }
      })
      this.$emit('onDeleteChannel', this.deleteResult)
    }
  },

  computed: {
    ...mapState([
      'user'
    ]),
    // 计算所有频道中是否有包含用户频道的数据，如果有同样的数据则不进行渲染
    allUserChannels() {
      // filter 过滤
      // find 查询  查询两个频道变量中是否有相同的值，有则取反，取不相同的数据
      return this.allChannelList.filter(userChannel => {
        return !this.UserServiceList.find(myChannel => {
          return myChannel.id === userChannel.id
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.all-channel {
  padding: 0 10px;
  margin-bottom: 50px;
   .my-channel{
    border-top: 1px solid #e9e1e1;
    margin-top: 90px;
    padding-top: 10px;
    height: 500px;

    /deep/.van-checkbox-group {
      display: flex;
      justify-content: flex-start;
      padding: 0 20px;
      border: 0;
      height: 300px;
      overflow:scroll;
    }
    .iconBtn-size {
      font-size: 22px;
      border: 0;
      padding: 20px 0;
      margin: 0 30px;
    }
    .deleteBtn {
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: flex-end;
    }
    .deleteBtn {
      .allBtn {
        margin-right: 20px;
      }
    }
   }
   .whole-channel {
    height: 300px;
    /deep/.van-checkbox-group {
      display: flex;
      justify-content: flex-start;
      padding: 0 20px;
      height: 400px;
      overflow:scroll;
      .allIconBtn {
        font-size: 22px;
        padding: 20px 0;
        margin: 0 30px;
      }
    }
    .addBtn {
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: flex-end;
      margin-top: 20px;
      .addAllBtn {
        margin-right: 20px;
      }
    }
   }
}
</style>